<template>
  <div class="conflict-resolver">
    <div class="conflict-header">
      <el-icon class="warning-icon"><WarningFilled /></el-icon>
      <div class="header-text">
        <h4>发现 {{ conflicts.length }} 个冲突</h4>
        <p>以下文件在恢复时可能会遇到问题，请选择处理方式</p>
      </div>
    </div>
    
    <div class="conflict-list">
      <div
        v-for="(conflict, index) in conflicts"
        :key="conflict.targetPath"
        class="conflict-item"
      >
        <div class="conflict-info">
          <div class="conflict-path">
            <el-icon><Document /></el-icon>
            <span>{{ conflict.targetPath }}</span>
          </div>
          
          <div class="conflict-issues">
            <el-tag
              v-if="conflict.existingFile"
              type="warning"
              size="small"
              :icon="WarningFilled"
            >
              文件已存在
            </el-tag>
            <el-tag
              v-if="conflict.sizeConflict"
              type="danger"
              size="small"
              :icon="CircleCloseFilled"
            >
              大小冲突
            </el-tag>
          </div>
        </div>
        
        <div class="conflict-actions">
          <el-radio-group
            v-model="resolutions[index]"
            size="small"
          >
            <el-radio-button label="overwrite">覆盖</el-radio-button>
            <el-radio-button label="skip">跳过</el-radio-button>
            <el-radio-button label="rename">重命名</el-radio-button>
          </el-radio-group>
          
          <el-input
            v-if="resolutions[index] === 'rename'"
            v-model="renamedPaths[index]"
            placeholder="输入新文件名"
            size="small"
            style="margin-top: 8px; width: 200px;"
          />
        </div>
      </div>
    </div>
    
    <div class="batch-actions">
      <el-button-group>
        <el-button @click="setAllResolutions('overwrite')" size="small">
          全部覆盖
        </el-button>
        <el-button @click="setAllResolutions('skip')" size="small">
          全部跳过
        </el-button>
        <el-button @click="setAllResolutions('rename')" size="small">
          全部重命名
        </el-button>
      </el-button-group>
    </div>
    
    <div class="resolution-summary">
      <el-descriptions :column="3" size="small">
        <el-descriptions-item label="覆盖">
          {{ getResolutionCount('overwrite') }}
        </el-descriptions-item>
        <el-descriptions-item label="跳过">
          {{ getResolutionCount('skip') }}
        </el-descriptions-item>
        <el-descriptions-item label="重命名">
          {{ getResolutionCount('rename') }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { WarningFilled, CircleCloseFilled, Document } from '@element-plus/icons-vue'
import type { ConflictInfo } from '../types/basic'

interface Props {
  conflicts: ConflictInfo[]
}

interface Emits {
  (e: 'resolutions-changed', resolutions: ConflictResolution[]): void
}

interface ConflictResolution {
  targetPath: string
  action: 'overwrite' | 'skip' | 'rename'
  newPath?: string
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Initialize resolutions for each conflict
const resolutions = ref<string[]>(
  props.conflicts.map(() => 'overwrite')
)

const renamedPaths = ref<string[]>(
  props.conflicts.map(conflict => {
    const parts = conflict.targetPath.split('/')
    const fileName = parts.pop() || ''
    const dir = parts.join('/')
    const nameWithoutExt = fileName.replace(/\.[^/.]+$/, '')
    const ext = fileName.includes('.') ? fileName.split('.').pop() : ''
    return `${dir}/${nameWithoutExt}_recovered${ext ? '.' + ext : ''}`
  })
)

const conflictResolutions = computed((): ConflictResolution[] => {
  return props.conflicts.map((conflict, index) => ({
    targetPath: conflict.targetPath,
    action: resolutions.value[index] as 'overwrite' | 'skip' | 'rename',
    newPath: resolutions.value[index] === 'rename' ? renamedPaths.value[index] : undefined
  }))
})

const setAllResolutions = (action: string) => {
  resolutions.value = resolutions.value.map(() => action)
}

const getResolutionCount = (action: string): number => {
  return resolutions.value.filter(r => r === action).length
}

// Emit changes when resolutions change
watch(conflictResolutions, (newResolutions) => {
  emit('resolutions-changed', newResolutions)
}, { deep: true })
</script>

<style scoped>
.conflict-resolver {
  padding: 16px;
  background-color: var(--el-color-warning-light-9);
  border: 1px solid var(--el-color-warning-light-7);
  border-radius: 6px;
}

.conflict-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.warning-icon {
  color: var(--el-color-warning);
  font-size: 20px;
  margin-top: 2px;
}

.header-text h4 {
  margin: 0 0 4px 0;
  color: var(--el-text-color-primary);
}

.header-text p {
  margin: 0;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.conflict-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.conflict-item {
  padding: 12px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
}

.conflict-info {
  margin-bottom: 12px;
}

.conflict-path {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.conflict-issues {
  display: flex;
  gap: 8px;
}

.conflict-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.batch-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.resolution-summary {
  background-color: var(--el-bg-color);
  padding: 12px;
  border-radius: 4px;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}

:deep(.el-descriptions__content) {
  font-weight: 600;
  color: var(--el-color-primary);
}
</style>